<template>
  <view>
    <!-- <AtNavBar
      title='美食大全'
      class="title"
      color="#fff"
      v-if="process.env.TARO_ENV === 'h5'"
    ></AtNavBar> -->
    <view class="main">
      <component :is="comp"></component>
    </view>
    <!-- <AtTabBar
      fixed
      color="#666"
      selectedColor="#000"
      :fontSize="12"
      :tabList="[
        { 
          title: '美食大全', 
          image: cookbook, 
          selectedImage: cookbookActive
        },
        { title: '分类', 
          image: menu,
          selectedImage: menuActive
        },
        { 
          title: '更多', 
          image: more,
          selectedImage: moreActive
        }
      ]"
      @click="handleClick"
      :current="current"
    /> -->
  </view>
</template>

<script>
import Vue from 'vue'
import {AtNavBar, AtTabBar} from 'taro-ui-vue'

import cookbook from '../../assets/images/cookbook.png'
import cookbookActive from '../../assets/images/cookbook-active.png'
import menu from '../../assets/images/menu.png'
import menuActive from '../../assets/images/menu-active.png'
import more from '../../assets/images/more.png'
import moreActive from '../../assets/images/more-active.png'

import Cookbook from './cookbook/Cookbook'
import Category from './category/Category'
import More from './more/More'

const components = [ Cookbook, Category, More ]

export default {
  name: 'Index',

  data() {
    return {
      current: 0
    }
  },

  components: {
    Cookbook,
    Category,
    More
  },

  computed: {
    comp() {
      return components[this.current]
    }
  },

  methods: {
    handleClick(index) {
      this.current = index
    }
  },
}
</script>

<style lang="scss">
.title {
  background-color: #ee742f;
  .at-nav-bar__title {
    color: #fff;
  }
}

.main {
  padding-bottom: 120px;
  background-color: #eee;
}
</style>
